import React from 'react'
import { ConfigProvider } from 'antd'
import zhCN from 'antd/es/locale/zh_CN'
import { when, reaction, configure, autorun, action } from 'mobx'
import { Provider, Observer, observer } from 'mobx-react'
import { Router } from 'react-router'
import { createHashHistory } from 'history'
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router'

// import "ace-builds/webpack-resolver"
import ace from 'ace-builds'
import modeJson from 'ace-builds/src-noconflict/mode-json'
import modeXml from 'ace-builds/src-noconflict/mode-xml'
import modeHtml from 'ace-builds/src-noconflict/mode-html'
import modeSql from 'ace-builds/src-noconflict/mode-sql'
import modeYaml from 'ace-builds/src-noconflict/mode-yaml'
import modeText from 'ace-builds/src-noconflict/mode-text'
import themeEclipse from "ace-builds/src-noconflict/theme-eclipse"
import themeTwilight from "ace-builds/src-noconflict/theme-twilight"
//@ts-ignore
import YAML from 'js-yaml'
import AppLayout from './layout/AppLayout'
import { Login } from './layout/Login'

const browserHistory = createHashHistory()
const routingStore = new RouterStore()
const history = syncHistoryWithStore(browserHistory, routingStore)

ace.config.setModuleUrl("ace/theme/eclipse", themeEclipse)
ace.config.setModuleUrl("ace/theme/twilight", themeTwilight)
ace.config.setModuleUrl("ace/mode/json", modeJson)
ace.config.setModuleUrl("ace/mode/html", modeHtml)
ace.config.setModuleUrl("ace/mode/xml", modeXml)
ace.config.setModuleUrl("ace/mode/sql", modeSql)
ace.config.setModuleUrl("ace/mode/yaml", modeYaml)
ace.config.setModuleUrl("ace/mode/text", modeText)
// ace.config.set(
//     "basePath",
//     "https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/"
// );
ace.config.setModuleUrl(
    "ace/mode/json_worker",
    "https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/worker-json.js"
);

import 'antd/dist/antd.less'

interface AppProps {

}

interface State {
    isLogin: boolean
}

@observer
export default class App extends React.Component<AppProps, State> {

    stopWatch?: () => void

    constructor(props: AppProps) {
        super(props)

        // 检查是否已经记录登录
        $store.getAction().auth.checkLocalStage()

        const { auth } = $store.getState()
        this.state = {
            isLogin: auth.isLogin
        }
    }

    componentDidMount() {
        const { auth } = $store.getState()

        this.stopWatch = reaction(
            () => auth.isLogin,
            (isLogin) => {
                this.setState({
                    isLogin
                })
            }
        )
    }

    componentWillUnmount() {
        if (typeof this.stopWatch === 'function') {
            this.stopWatch()
            delete this.stopWatch
        }
    }


    render(): React.ReactElement {
        return (
            <ConfigProvider locale={zhCN}>
                <Provider {...$store.getState()} routing={routingStore}>
                    <Router history={history}>
                        {
                            this.state.isLogin ? <AppLayout /> : <Login />
                        }
                    </Router>
                </Provider>
            </ConfigProvider>
        )
    }
}
